<template>
    <div>
      <Card >
        <Row v-show="openSearch" @keydown.enter.native="handleSearch">
          <Form ref="searchForm" :model="searchForm" inline :label-width="70">

            <FormItem label="卡号" prop="cardId">
              <Input
                  type="text"
                  v-model="searchForm.cardId"
                  placeholder="请输入真实姓名"
                  clearable
                  style="width: 200px"
              />
            </FormItem>
            <span v-if="drop">

          </span>
            <FormItem style="margin-left: -35px" class="br">
              <Button @click="handleSearch" type="primary" icon="ios-search"
              >搜索</Button
              >
              <Button @click="handleReset">重置</Button>
              <a class="drop-down" @click="dropDown">
                {{ dropDownContent }}
                <Icon :type="dropDownIcon"></Icon>
              </a>
            </FormItem>
          </Form>
        </Row>
        <Row class="operation">
          <Button @click="getDataList" icon="md-refresh">刷新</Button>
          <Button type="dashed" @click="openTip=!openTip">{{openTip ? "关闭提示" : "开启提示"}}</Button>
        </Row>
        <Alert show-icon v-show="openTip" style="margin-top: 8px">
          已选择
          <span class="select-count">{{ selectList.length }}</span> 项
          <a class="select-clear" @click="clearSelectAll">清空</a>
        </Alert>
        <Table
            :loading="loading"
            border
            :columns="columns"
            :data="data"
            ref="table"
            sortable="custom"
            @on-sort-change="changeSort"
            @on-selection-change="changeSelect"
        >
        </Table>
        <Row type="flex" justify="end" class="page">
          <Page
              :current="searchForm.pageNumber"
              :total="total"
              :page-size="searchForm.pageSize"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
          ></Page>
        </Row>
      </Card>
    </div>
</template>

<script>
import {page} from '@/api/vip/vipDeposit.js'
export default {
  name: "deposit", // 充值记录
  data(){
    return {
      openSearch: true,//显示搜索
      openTip: true, //显示提示
      drop: false,
      dropDownContent: '展开',
      dropDownIcon: "ios-arrow-down",
      searchForm: {
        cardId: '',
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      data: [], // 表单数据
      total: 0, // 表单数据总数
      loading: false,
      selectList: [], // 多选数据
      columns:[
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "会员卡id",
          key: "cardId",
          minWidth: 120,
          sortable: false,
          align: "center",
        },
        {
          title: "金额",
          key: "money",
          minWidth: 120,
          sortable: false,
          align: "center",
        },
        {
          title: "优惠金额",
          key: "moneyOther",
          minWidth: 120,
          sortable: false,
          align: "center",
        },
        {
          title: "充值类型",
          key: "type",
          minWidth: 120,
          sortable: false,
          align: "center",
        },],
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getDataList();
    },
    getDataList(){
      this.loading = true;
      page(this.searchForm).then(res => {
        this.loading = false;
        if(res.success){
          this.data = res.result.records;
          this.total = res.result.total;
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        }
      })
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.selectDate = null;
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";
      // 重新加载数据
      this.getDataList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    changeSelect(e) {
      this.selectList = e;
    },
    dropDown() {
      if (this.drop) {
        this.dropDownContent = "展开";
        this.dropDownIcon = "ios-arrow-down";
      } else {
        this.dropDownContent = "收起";
        this.dropDownIcon = "ios-arrow-up";
      }
      this.drop = !this.drop;
    },
  }
}
</script>

<style scoped>

</style>
